<template>
  <div>
    <BaseForm ref="searchForm" type="search" v-model:form="searchParams" @search="handleSearch">
      <el-form-item label="微信群名称">
        <el-input style="width: 180px" v-model="searchParams.wxGroupName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="客户联系方式">
        <el-input style="width: 180px" v-model="searchParams.phone" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="供电单位">
        <selectPage
          style="width: 180px"
          :item="powerItem"
          v-model="searchParams.powerId"
          @update:modelValue="changePower"
        />
      </el-form-item>
      <el-form-item label="供电线路">
        <selectPage
          :item="lineItem"
          v-model="searchParams.lineId"
          :search="lineSearch"
          @update:modelValue="changeLine"
        />
      </el-form-item>
      <el-form-item label="台区">
        <selectPage
          :item="areaItem"
          v-model="searchParams.areaId"
          :search="areaSearch"
          @update:modelValue="changeArea"
        />
      </el-form-item>
      <el-form-item label="片区/村社">
        <!--        <el-select-->
        <!--          style="width: 180px"-->
        <!--          v-model="searchParams.communityId"-->
        <!--          filterable-->
        <!--          placeholder="请选择"-->
        <!--          clearable-->
        <!--        >-->
        <!--          <el-option-->
        <!--            v-for="item in communityList"-->
        <!--            :key="item.value"-->
        <!--            :value="item.value"-->
        <!--            :label="item.label"-->
        <!--          >-->
        <!--          </el-option>-->
        <!--        </el-select>-->

        <selectPage
          :item="communityItem"
          ref="CommunityRef"
          v-model="searchParams.communityId"
          :search="searchParams.communitySearch"
        />
      </el-form-item>
      <el-form-item label="关联网格经理">
        <el-select style="width: 180px" v-model="searchParams.managerId" filterable placeholder="请选择" clearable>
          <el-option v-for="item in optionsMange" :key="item.value" :value="item.value" :label="item.label">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类型">
        <el-select style="width: 180px" v-model="searchParams.classify" filterable placeholder="请选择" clearable>
          <el-option :value="1" label="舆情"> </el-option>
          <el-option :value="3" label="未知诉求"> </el-option>
          <el-option :value="4" label="停电诉求"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否回复已处理" label-width="120">
        <el-select style="width: 180px" v-model="searchParams.isBackDeal" filterable placeholder="请选择" clearable>
          <el-option :value="1" label="是"> </el-option>
          <el-option :value="0" label="否"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否生成工单">
        <el-select style="width: 180px" v-model="searchParams.isWorkOrder" filterable placeholder="请选择" clearable>
          <el-option :value="1" label="是"> </el-option>
          <el-option :value="0" label="否"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工单状态">
        <el-select style="width: 180px" v-model="searchParams.dealStatus" filterable placeholder="请选择" clearable>
          <el-option :value="1" label="在途"> </el-option>
          <el-option :value="2" label="办结"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工单处理人">
        <el-input style="width: 180px" v-model="searchParams.dealUserName" placeholder="请输入"></el-input>
      </el-form-item>
      <!-- <el-form-item label="工单处理情况">
                <el-input style="width: 180px" v-model="searchParams.dealContent" placeholder="请输入"></el-input>
            </el-form-item> -->
      <el-form-item label="工单处理时间">
        <el-date-picker
          style="width: 360px"
          v-model="searchParams.dealTime"
          type="datetimerange"
          range-separator="~"
          value-format="YYYY-MM-DD HH:ss:mm"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :default-time="[new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]"
        />
      </el-form-item>
      <el-form-item label="触发预警时间">
        <el-date-picker
          style="width: 360px"
          v-model="searchParams.warndate"
          type="datetimerange"
          range-separator="~"
          value-format="YYYY-MM-DD HH:ss:mm"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :default-time="[new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]"
        />
      </el-form-item>
    </BaseForm>

    <BaseTable
      ref="baseTable"
      :getTableDataFn="reportStatisticsService.warnLedgerPageList"
      :searchParams="searchParams"
      :serial="true"
      :fixed="true"
      :downLoad="downLoad"
      :down="true"
    >
      <el-table-column prop="classify" label="类型" fixed="left" minWidth="100px">
        <template #default="scope">
          <el-text v-if="scope.row.classify == 1">舆情</el-text>
          <el-text v-if="scope.row.classify == 3">未知诉求</el-text>
          <el-text v-if="scope.row.classify == 4">停电诉求</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="warnTime" label="触发预警时间" fixed="left" minWidth="170px" />
      <el-table-column prop="recordContent" label="预警消息内容" fixed="left" minWidth="170px" show-overflow-tooltip />
      <el-table-column prop="wxGroupName" label="微信群名称" fixed minWidth="100px" />
      <el-table-column prop="groupId" label="微信群ID" minWidth="110px" />
      <el-table-column prop="powerJsonDtoList" label="供电单位" show-overflow-tooltip minWidth="170px">
        <template #default="scope">
          <span v-if="scope.row.powerJsonDtoList">
            {{ scope.row.powerJsonDtoList.map((n) => n.powerName).join('、') }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="powerDtoList" label="供电线路" show-overflow-tooltip minWidth="170px">
        <template #default="scope">
          <span v-if="scope.row.lineJsonDtoList">
            {{ scope.row.lineJsonDtoList.map((n) => n.lineName).join('、') }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="areaJsonDtoList" label="台区" show-overflow-tooltip minWidth="170px">
        <template #default="scope">
          <span v-if="scope.row.areaJsonDtoList">
            {{ scope.row.areaJsonDtoList.map((n) => n.areaName).join('、') }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="communityDtoList" label="关联片区/村社" minWidth="170">
        <template #default="scope">
          <Tooltip :text="scope.row.communityJsonDtoList?.map((e) => e.communityName)?.join('、') || ''"></Tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="managerJsonDtoList" label="关联网格经理" minWidth="170px">
        <template #default="scope">
          <Tooltip :text="scope.row.managerJsonDtoList?.map((e) => e.managerName)?.join('、') || ''"></Tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="sendUserName" label="客户昵称" minWidth="100px" />
      <el-table-column prop="phone" label="客户联系方式" minWidth="100px" />
      <el-table-column prop="wxCode" label="客户微信号" minWidth="100px" />
      <el-table-column prop="sendUserId" label="客户微信ID" minWidth="100px" />
      <el-table-column prop="isWorkOrder" label="是否生成工单" minWidth="110px">
        <template #default="scope">
          {{ scope.row.isWorkOrder ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column prop="dealStatus" label="工单状态" minWidth="100px">
        <template #default="scope">
          <span v-if="scope.row.isWorkOrder">
            {{ scope.row.dealStatus == 1 ? '在途 ' : scope.row.dealStatus == 2 ? '办结' : '' }}</span
          >
          <span v-else></span>
        </template>
      </el-table-column>
      <el-table-column prop="dealUserName" label="工单处理人" minWidth="100px" />
      <el-table-column prop="dealTime" label="工单处理时间" minWidth="110px" />
      <el-table-column prop="dealContent" label="工单处理情况" minWidth="110px" />
      <el-table-column prop="isBackDeal" label="是否回复已处理" fixed="right" minWidth="100px">
        <template #default="scope">
          {{ scope.row.isBackDeal ? '是' : '否' }}
        </template>
      </el-table-column>

      <el-table-column prop="op" label="操作" fixed="right" minWidth="110px">
        <template #default="scope">
          <el-link :underline="false" link type="primary" size="small" @click.prevent="handleDetail(scope.row)"
            >查看回复内容</el-link
          >
        </template>
      </el-table-column>
    </BaseTable>
    <AnswerContent v-if="visibleAnswerContent" v-model:dialogVisible="visibleAnswerContent" :item="item">
    </AnswerContent>
  </div>
</template>

<script setup lang="ts">
import { basicConfigService } from '@/api/basicConfig';

import { reportStatisticsService } from '@/api/reportStatistics';
import AnswerContent from './answerContent.vue';
import selectPage from '@/components/selectPage.vue';

const lineIdList = ref([]);

const searchParams = ref({
  wxGroupName: '',
  lineId: '',
  powerId: '',
  areaId: '',
  phone: '',
  communityId: '',
  managerId: '',
  classify: '',
  isBack: '',
  isWorkOrder: '',
  warndate: '',
  dealTime: '',
  dealStatus: '',
  dealUserName: '',
  isBackDeal: '',

  //临时变量
  lineSearch: {
    powerId: '',
  },
  areaSearch: {
    powerId: '',
    lineId: '',
  },
  communitySearch: {
    powerId: '',
    lineId: '',
    areaId: '',
  },
});
const powerItem = ref({
  name: '供电单位',
  key: 'powerId',
  funName: 'getByAreaQueryByPower',
  option: {
    name: 'powerName',
    value: 'powerId',
  },
});
const lineSearch = ref({
  powerId: searchParams.value.powerId,
});
const lineItem = ref({
  name: '供电线路',
  key: 'lineId',
  funName: 'getByAreaQueryByLine',
  option: {
    name: 'lineName',
    value: 'lineId',
  },
});
const areaSearch = ref({
  powerId: searchParams.value.powerId,
  lineId: searchParams.value.lineId,
});
const areaItem = ref({
  name: '台区',
  key: 'areaId',
  funName: 'getByAreaQueryByArea',
  option: {
    name: 'areaName',
    value: 'areaId',
  },
});

const communityItem = ref({
  name: '关联片区/村社',
  key: 'communityId',
  funName: 'getAllCommunity',
  option: {
    name: 'communityName',
    value: 'communityId',
  },
});

const changePower = (val: any) => {
  //线路搜索
  searchParams.value.lineSearch.powerId = val;
  //台区搜索赋值
  searchParams.value.areaSearch.powerId = val;
  searchParams.value.areaSearch.lineId = '';

  //社区搜索赋值
  searchParams.value.communitySearch.powerId = val;
  searchParams.value.communitySearch.lineId = '';
  searchParams.value.communitySearch.areaId = '';

  //公共搜索
  searchParams.value.lineId = '';
  searchParams.value.areaId = '';
  searchParams.value.communityId = '';
};
const changeLine = (val: any) => {
  searchParams.value.areaSearch.lineId = val;

  searchParams.value.communitySearch.lineId = val;
  searchParams.value.communitySearch.areaId = '';

  searchParams.value.areaId = '';
  searchParams.value.communityId = '';
};

const changeArea = (val: any) => {
  searchParams.value.communitySearch.areaId = val;

  searchParams.value.communityId = '';
};

const areaIdList = ref([]);

const visibleAnswerContent = ref(false);
const handleDetail = (row) => {
  item.value = row;
  visibleAnswerContent.value = true;
};
const item = ref({});
const baseTable = ref(null);

const handleSearch = (val: any) => {
  baseTable.value.handleSearch({
    ...searchParams.value,
    warnTimeBegin:
      searchParams.value.warndate && searchParams.value.warndate.length == 2
        ? searchParams.value.warndate[0]
        : undefined,
    warnTimeEnd:
      searchParams.value.warndate && searchParams.value.warndate.length == 2
        ? searchParams.value.warndate[1]
        : undefined,
    dealTimeStart:
      searchParams.value.dealTime && searchParams.value.dealTime.length == 2
        ? searchParams.value.dealTime[0]
        : undefined,
    dealTimeEnd:
      searchParams.value.dealTime && searchParams.value.dealTime.length == 2
        ? searchParams.value.dealTime[1]
        : undefined,
    warndate: undefined,
    dealTime: undefined,
  });
  if (!val) {
    lineSearch.value.powerId = '';
    areaSearch.value.powerId = '';
    areaSearch.value.lineId = '';
  }
};
const communityList = ref([]);

const getLineList = () => {
  basicConfigService.getByAreaQueryDto({ data: { powerId: searchParams.value.powerId } }).then((res) => {
    lineIdList.value = res.data.map((n) => {
      return {
        label: n.lineName,
        value: n.lineId,
      };
    });
  });
};
const optionsMange = ref([]);
const getAllManager = () => {
  basicConfigService.getAllManager({ data: {} }).then((res) => {
    optionsMange.value = res.data.map((n) => {
      return {
        label: n.managerName,
        value: n.managerId,
      };
    });
  });
};

onMounted(() => {
  getAllManager();
});
//
// const resetForm = () => {
//   searchParams.value = {
//     wxGroupName: "",
//     lineId: "",
//     powerId: "",
//     areaId: "",
//     phone: "",
//     communityId: "",
//     managerId: "",
//     classify: "",
//     isBack: "",
//     isWorkOrder: "",
//     warndate: "",
//     dealTime: "",
//     dealStatus: "",
//
//     dealUserName: "",
//   };
//   handleSearch();
// };

const downLoad = () => {
  reportStatisticsService
    .warnLedgerPageListDownload({
      data: {
        ...searchParams.value,
        // orderField: sortTablekey.value,
        // isDesc: isDesc.value,
        date: undefined,
      },
    })
    .then((res) => {
      var blob = new Blob([res]);
      let url = window.URL.createObjectURL(blob);
      let link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;
      link.setAttribute('download', '预警处理台账.xls');
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    });
};
</script>

<style lang="less" scoped></style>
